<template>
    <div id="guaguId" class="guagubox"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option:null
    };
  },
  props: {
    chartData: Number,
  },
  watch: {
    chartData: {
      handler(newVal) {
        console.log(newVal);
        this.initStr();
      },
      deep: true,
    },
  },
  mounted() {
    this.initStr();
  },
  methods: {
    initStr() {
      this.option = {
        series: [
                {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 240,
                splitNumber: 12,
                itemStyle: {
                    color: '#58D9F9',
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 18
                },
                pointer: {
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '75%',
                    width: 16,
                    offsetCenter: [0, '5%']
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                    width: 18
                    }
                },
                axisTick: {
                    splitNumber: 2,
                    lineStyle: {
                    width: 2,
                    color: '#999'
                    }
                },
                splitLine: {
                    length: 12,
                    lineStyle: {
                    width: 3,
                    color: '#999'
                    }
                },
                axisLabel: {
                    distance: 30,
                    color: '#999',
                    fontSize: 20
                },
                title: {
                    show: false
                },
                detail: {
                    backgroundColor: '#fff',
                    borderColor: '#999',
                    borderWidth: 2,
                    width: '60%',
                    lineHeight: 40,
                    height: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '35%'],
                    valueAnimation: true,
                    formatter: function (value) {
                    return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                    },
                    rich: {
                    value: {
                        fontSize: 30,
                        fontWeight: 'bolder',
                        color: '#777'
                    },
                    unit: {
                        fontSize: 20,
                        color: '#999',
                        padding: [0, 0, 0, 10]
                    }
                    }
                },
                data: [
                    {
                    value: this.chartData
                    }
                ]
                }
            ]
      };
      this.initBar(this.option);
    },
    initBar() {
      var element = document.getElementById('guaguId');
            if (element) {
                let id = echarts.init(element);
                id.setOption(this.option);
                window.addEventListener("resize", id.resize);
            }

     
    }
  }
};
</script>

<style>
.guagubox{
    height: 600px;
}
</style>